<%-- 
    Document   : AdministrarEmpresa
    Created on : 8/11/2012, 02:59:05 PM
    Author     : Karina
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="/WEB-INF/jspf/HeadDocument.jspf" %>
        <script type="text/javascript" src="${pageContext.request.contextPath}/content/knockout.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/content/scriptEmpresa.js"></script>
        <style type="text/css">
            #formulario
            {
                width: 75%;
            }
        </style>
        <title>Administrar Empresas</title>
    </head>
    <body>
        <div id="wrapper">
            <%@include file="/WEB-INF/jspf/header.jspf" %>
            <%@include file="/WEB-INF/jspf/menu.jspf" %>
            <section id="contenido">
                <div id="formulario">
                    <form data-bind="submit:$root.create">
                        <div class="contenidoTabla">
                            <span>ID:</span>
                            <input id="id" type="text" required="required"/>
                            <br/>
                            <span>Nombre:</span>
                            <input id="nombre" type="text" required="required"/>
                            <br/>
                            <span>Dirección:</span>
                            <input id="direccion" type="text"/>
                            <br/>
                            <span>Tel&eacute;fono:</span>
                            <input id="telefono" type="text"/>
                            <br/>
                            <span>Propietario:</span>
                            <input id="propietario" type="text" required="required"/>
                            <br/>
                            <div id="botones">
                                <input class="button" type="submit" value="Guardar"/>
                                <input class="button" type="button" value="Limpiar" onclick="limpiarCampos();"/>
                                <input class="button cancelar" type="button" value="Cancelar"/>
                            </div>
                        </div>                        
                    </form>
                    <section id="tablaDatos">
                        <table id="tabla">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th>Dirección</th>
                                    <th>Teléfono</th>
                                    <th>Propietario</th>
                                    <th colspan="2">Opciones</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: empresas">
                                <tr>
                                    <td>
                                        <span data-bind="text: $data.id"/>
                                    </td>
                                    <td>
                                        <span data-bind="text: $data.nombre"/>
                                    </td>
                                    <td>
                                        <span data-bind="text: $data.direccion"/>
                                    </td>
                                    <td>
                                        <span data-bind="text: $data.telefono"/>
                                    </td>
                                    <td>
                                        <span data-bind="text: $data.propietario"/>
                                    </td>
                                    <td>
                                        <input type="button" value="Eliminar" data-bind="click:$root.delete" />
                                    </td>
                                    <td>
                                        <input type="button" value="Editar" data-bind="click:$root.update" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </div>                
            </section>
            <%@include file="/WEB-INF/jspf/footer.jspf" %>
        </div>
    </body>
</html>
